<template lang="pug">
  ModuleWrapper(title="边境值守概况")
    StaticView.static-item(label="边境值守点" :value="F0000001" icon="border-duty-point")
    StaticView.static-item(label="值守点在岗人数" :value="F0000002" icon="people-duty")
    div.people-number-duty-detail
      div.people-number-duty-item
        div.label 实到值守人员
        div.value.f-number {{F0000003}}
      div.people-number-duty-item
        div.label 未到值守人员
        div.value.f-number {{F0000002-F0000003}}
      div.chart-wrap(ref="NumberDuty")
</template>

<script>
export default {
  name: "ModuleDetectionSurvey",
 props: {
  	F0000001:{
  	  type:String,
  	  required:false
  	},
	F0000002:{
	  type:String,
	  required:false
	},
	F0000003:{
	  type:String,
	  required:false
	},
  },

  data() {
    return {
      realTimeData: [
        {
          label: '当日接种人数',
          value: '0',
          compare: {
            label: '较昨日',
            value: '+0',
          }
        },
        {
          label: '当月接种人数',
          value: '0',
          compare: {
            label: '较上月',
            value: '+0',
          }
        },
      ],
      charts: {
        numberDuty: null,
      }
    }
  },
  methods: {
    renderNumberDutyChart() {
      const seriesData = [
        {
          name: '实到值守人员',
          value: this.F0000003 - 0,
        },
        {
          name: '未到值守人员',
          value: this.F0000002 - this.F0000003,
        },
      ];
      this.charts.numberDuty = this.$echarts.init(this.$refs['NumberDuty']);
      this.charts.numberDuty.setOption({
        textStyle: {
          color: '#BAD1FF',
        },
        color: ['#006bac', '#05FDBB'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '修饰',
            type: 'pie',
            radius: ['0%', '45%'],
            label: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(0,73,104,0.26)',
            },
            data: [
              {value: 100, name: '修饰'}
            ]
          },
          {
            name: '修饰',
            type: 'pie',
            radius: ['80%', '95%'],
            label: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(0,73,104,0.26)',
            },
            data: [
              {value: 100, name: '修饰'}
            ]
          },
          {
            name: '到值人员情况',
            type: 'pie',
            radius: ['60%', '80%'],
            label: {
              show: false,
            },
            data: seriesData
          }
        ]
      });
    }
  },
  mounted() {
    this.renderNumberDutyChart();
  }
}
</script>

<style lang="scss" scoped>
.people-number-duty-detail{
  display: flex;
  align-items: center;
  .people-number-duty-item{
    margin-right: rem(50);
    .label{
      color: #698B95;
      font-size: rem(16);
      font-weight: bold;
      display: flex;
      align-items: center;
      &:before{
        content: '';
        display: block;
        @include size(rem(5), rem(10));
        background-color: #F07B5F;
        margin-right: rem(5);
      }
    }
    .value{
      font-size: rem(40);
      color: #FFFFFF;
      font-weight: bold;
    }
    &:nth-child(1) {
      .label{
        &:before{
          background-color: #F07B5F;
        }
      }
    }
    &:nth-child(2) {
      .label{
        &:before{
          background-color: #05FDBB;
        }
      }
    }
  }
  .chart-wrap{
    @include square(rem(140))
  }
}
</style>
